<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formUtilsDemo</title>
    <script type="text/javascript" src="js/formUtils.js" charset="UTF-8"></script>
    <style type="text/css">
        .space{
            line-height:45px;
        }
    </style>
</head>
<body>
    <div>
        <table width="100%" border="0"  cellspacing="0" cellpadding="0" align=center>
            <tr>
                <td style="padding-left:15%;padding-right:15%;">

                    <form id="submitForm" action="">
                        <table width="100%" border="0"  align="center" cellspacing="0" cellpadding="0">
                            <tr class="space">
                                <td width="14%" align="right">
                                    账户名称：<font color="red">*</font>
                                </td>
                                <td width="20%">
                                    <input type="text" name="accountname" id="accountname" style="width:100%;"  zdmc="账户名称" zdlx="varchar" maxlength="10" isnull="0" isjczf="1"  />
                                </td>
                                <td width="13%" align="right">密&nbsp;&nbsp;&nbsp;&nbsp;码：<font color="red">*</font></td>
                                <td width="20%">
                                    <input type="password" id="password" name="password" style="width:100%;"/>

                                </td>
                                <td width="13%" align="right">性&nbsp;&nbsp;&nbsp;&nbsp;别：<font color="red">*</font></td>
                                <td width="20%">
                                    <input type="radio" checked="checked" name="sex" value="male" />男性
                                    <input type="radio" name="sex" value="female" />女性
                                </td>

                            </tr>

                            <tr class="space">

                                <td width="14%" align="right">兴趣爱好：<font color="red">*</font></td>
                                <td colspan="5" width="86%" >
                                    <input name="favorite" type="checkbox" value="徒步" />徒步
                                    <input name="favorite" type="checkbox" value="读书" />读书
                                    <input name="favorite" type="checkbox" value="跑步" />跑步
                                    <input name="favorite" type="checkbox" value="看电影" />看电影
                                </td>

                            </tr>

                            <tr class="space">
                                <td width="14%" align="right">国&nbsp;&nbsp;&nbsp;&nbsp;籍：&nbsp;</td>
                                <td width="20%">
                                    <select name="country" id="country" style="width:100%;">
                                        <option value="">请选择国籍</option>
                                        <option value="中国">中国</option>
                                        <option value="美国">美国</option>
                                        <option value="法国">法国</option>
                                        <option value="意大利">意大利</option>
                                    </select>
                                </td>
                                <td width="13%" align="right"></td>
                                <td width="20%">

                                </td>
                                <td width="13%" align="right"></td>
                                <td width="20%">

                                </td>
                            </tr>

                            <tr class="space">
                                <td width="14%" align="right">文件上传：<font color="red">*</font></td>
                                <td colspan="5" width="86%" >
                                    <input type="file" />
                                </td>

                            </tr>
                            <tr class="space">

                                <td width="14%" align="right">备&nbsp;&nbsp;&nbsp;&nbsp;注：&nbsp;</td>
                                <td colspan="5" width="86%" >
                                    <textarea name = "bz" id="bz" rows="3" style="width:90%;">
                                    </textarea>
                                </td>

                            </tr>
                            <tr class="space">
                                <td width="14%" align="right">创建时间：&nbsp;</td>
                                <td width="20%">
                                    <input type="date" id="createtime" name="createtime"/>
                                </td>
                                <td width="13%" align="right">年&nbsp;&nbsp;&nbsp;&nbsp;龄：&nbsp;</td>
                                <td width="20%">
                                    <input type="number" id="age" name="age" />
                                </td>
                                <td width="13%" align="right">喜欢的颜色：&nbsp;</td>
                                <td width="20%">
                                    <input type="color" id="fcolor" name="fcolor"/>
                                </td>
                            </tr>

                            <tr class="space">
                                <td colspan="6" align="center">
                                    <input type="submit" value="提交"/>
                                    <input type="reset" value="重置" />
                                    <input type="button" value="确定" onclick="formSubmitOnclick()"/>
                                </td>
                            </tr>

                        </table>
                    </form>
                </td>
            </tr>
        </table>

    </div>
</body>
<iframe id="theIframe" name="theIframe" width=0 height=0 src=""></iframe>
<script type="text/javascript">
    /**
     * formUtils.isSubmit(strformid);
     * 功能：根据自定义属性校验Form表单
     * 校验From表单说明：
     * 1、给form表单元素加上自定义的属性才会进行表单校验。
     * 2、每个表单元素自定义的属性包括：
     *  diy：表单元素校验不通过时的自定义的提示语，有此属性，则显示自定义提示语，否则显示默认：字段名称+“不能为空,带*为必填项！”；
     *  zdmc：字段名称，用于默认提示语；
     *  zdlx：字段类型。字段类型的值包括：varchar，bigint，int,float，email，date
     *  isnull：判断字段是否可以为空 （0 不能为空 1 可以为空）。
     *  maxLength：限制输入字符串的最大长度。当zdlx为varchar时使用。
     *  iszw：是否判断中文。暂无此校验。
     *  isjczf：是否检测非法字符。(1 需要检测字符，且不可为非法字符；0 不需要检测字符，可以为非法字符)
     *  maxvalue：设置数字类型的最大值。当字段类型为bigint，int,float有效。
     *  minvalue：设置数字类型最小值。当字段类型为bigint，int,float有效。
     * @param strformid  表单id
     * @returns {boolean} 如果返回true则校验成功，否则失败
     */
function formSubmitOnclick(){
    if(formUtils.isSubmit("submitForm")){
        alert("表单校验成功！");
    }
  var formJson = formUtils.serializeJson("submitForm");
    console.log(formJson);
    alert(formJson.accountname);

}

</script>
</html>